<template>
	<view class="maskBg flex flex-direction justify-end"  v-show="isShow">
		<view class="area_wrap bg-fff padding-40 radius-top30 relative">
			<image class="area_close" src="../../static/img/close.png" mode="aspectFit" @tap="isShow=false"></image>
			<view class="fs-32 fw-bold text-center">请选择地区</view>
			<view class="flex align-center padding-y-30">
				<text class="area_sel text-cut padding-x-16" :class="{'color-zhuse':textCurrent == index}" v-for="(item, index) in arr" :key="index" @tap="selText(item, index)">{{item.label}}</text>
				<text class="area_sel color-zhuse" v-if="hasMore">请选择</text>
			</view>
			<scroll-view scroll-y class="area_box">
				<view class="fs-28 color-333 padding-y-16 text-cut" :class="{'fw-bolder color-zhuse':current == index }" v-for="(item, index) in list" :key="item.value" @tap="toggle(item, index)">
					<image v-if="current == index" class="duihao" src="../../static/img/duihao.png" mode="aspectFit"></image>
					{{item.label}}
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			selArr: {
				type: Array,
				default: ()=>[]
			}
		},
		data(){
			return{
				area:'',
				list:[],
				arr:[],
				current:-1,
				textCurrent:0,
				hasMore:true,
				
				isShow:false
			}
		},
	    mounted() {
			console.log(1111111)
			this.init();
	    },
		methods: {
			show(){
				this.isShow = true;
			},
			//回显
			fromParent(data){
				console.log(data)
				//if(this.arr.length > 0){
					this.arr = data;
					this.textCurrent = this.arr.length - 1;
					this.hasMore = true;
					if(this.arr.length == 1){
						this.textCurrent = this.arr.length - 1;
						this.init();
					}
					if(this.arr.length > 1){
						this.textCurrent = this.arr.length - 1;
						this.init(this.arr[this.arr.length - 2].value || '');
					}
				//}
			},
			//初始化
			reset(){
				this.list = [];
				this.arr = [];
				this.current = -1;
				this.textCurrent = 0;
				this.area = '';
				this.init();
			},
			//获取列表
			init(region){
				console.log(11111111111)
				var data = {
					region: region || ''
				}
				this.$api.getRegion(data).then(res => {
					console.log(res)
					if(res.code == 1){
						this.list = res.data;
						//获取当前选中的是第几个
						if(this.list.length > 0){
							this.list.forEach((m,i)=>{
								if(this.arr[this.textCurrent] && m.value == this.arr[this.textCurrent].value){
									this.current = i;
								}
							})
						}
						this.hasMore = true;
					}else{
						//说明是最后一级（没有下级了）
						if(res.data.length == 0){
							this.area = '';
							this.hasMore = false;
							this.$emit("close", this.arr);
							this.isShow = false;
						}
					}
				});
			},
			//点击选中列表
			toggle(item, index){
				console.log(index)
				this.current = index;
				this.arr[this.textCurrent] = item;
				this.init(item.value);
				if(this.textCurrent+1 < this.arr.length){
					this.arr = this.arr.slice(0, this.textCurrent+1)
				}
				this.textCurrent++;
				this.current = -1;
			},
			selText(item, index){
				this.textCurrent = index;
				if(index == 0){
					this.init();
				}else{
					this.init(this.arr[index-1].value);
				}
			},
			close(){
				this.$emit("close");
			}
		}
	};
</script>

<style lang="scss" scoped>
	.maskBg{
		background-color: rgba($color: #000000, $alpha: 0.5);
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 2;
	}
</style>
